!_Filtern
Letztes Update:
20. September 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Ein sichtbarer Wertebereich kann auf Basis gewisser Eigenschaften der Daten eingeschränkt werden. Alles was nicht dem gewählten Filter entspricht wird ausgeblendet.
Filtern reduziert so die Datenmenge und schafft dadurch eine höhere Relevanz und Übersicht.
Wann kommt dieses Element zum Einsatz?
UX Konzeption
Datum filtern:
Soll ein Nutzer ein einzelnes Datum oder einen Zeitraum auswählen, kommt ein Datepicker zum Einsatz. Diese müssen möglichst nutzerfreundlich gestaltet sein.
Datepicker bestehen aus einem (1) Eingabefeld (Datumsfelder aus mehreren Feldern sind für Nutzer mit Einschränkungen schwerer zu benutzen) für das Datum und alternativ eine Datumsauswahl über einen angezeigten Kalender.
- Muss durchgängig auch per Tastatur steuerbar sein.
- Kann/Soll ein Nutzer nur innerhalb eines gewissen Zeitraumes wählen, so ist auch nur dieser wählbar, der Rest inaktiv.
- Erhält das Textfeld den Fokus öffnet sich der Kalender.
- Wird über den Kalender ein Datum ausgewählt erscheint dieses im Eingabefeld und der Kalender schließt sich.
- Datumsformate im Textfeld sollten vom Nutzer auf vielfältige weise eingegeben werden können – das System muss diese Eingabeformen interpretieren und akzeptieren.
z.B. :
TTMMJJJJ
TTMMJJ
T.M.JJ
T.M.JJJJ
TT.MM.JJ
T.M. (hierbei wird das aktuelle Jahr ergänzt
Richtlinie 1.1.1.: alle Nicht-Text-Inhalte brauchen Textalternativen
Einzelnen Wert oder Range filtern
Slider ermöglichen die Auswahl eines einzelnen Wertes oder eines Wertebereichs.
- Für Slider gibt es immer zusätzlich Texteingabefelder für Personen welche diese Form der Eingabemöglichkeit bevorzugen.
- Das Textfeld befindet sich oberhalb, ebenso wie die Beschriftung/Skala (damit beide beim Bedienen mit den Fingern auf Mobilgeräten sichtbar sind.
- Der/die mit dem Schieberegler gewählte Wert/e sollte dynamisch in dem /den Eingabefeld(ern) angezeigt werden.
- Ein Slider zeigt nur auswählbare Werte, keine Zwischenwerte.
- Eine Skala zeigt zumindest Anfangs- und Endwerte an.
- Ist die Verteilung der wählbaren Werte nicht linear, sollte auch die Skala nicht Linear sein.
- Handelt es sich um einen Slider der einzelne Werte auswählen lässt sollte sich dieser mit klicken und ziehen bedienen lassen. z.B. „klick auf Wert 3 – der Slider springt auf Wert 3 oder: der Nutzer klickt auf den Sliderpunkt und zieht ihn auf den Wert 3.
- Bei Range-Slidern entfällt die Bedienbarkeit per Klick auf den neuen Wert, da das System nicht erkennen kann welchen der beiden Sliderpunkte es versetzen soll.
- Die gewählte Range wird am Slider markiert.
- Der grafische Teil des Sliders muss mittels „aria-hidden=“true“ verborgen werden.
- Die Steuerung muss auch mittels Tastatur möglich sein.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Zu den Texten siehe:
- Formulare Grundlagen
- Formulare: Eingabe von Daten
- Formulare: Auswahl von Daten
- Feedback: Fehlermeldungen